<template>
  <div class="ts-progress">
    <span class="ts-progress-mask" :style="'width:' + progress + 'px'"></span>
    <span class="ts-progress-status">{{ progress }}%</span>
  </div>
</template>
<script>
export default {
    data(){
        return {
            progress : 0
        }
    },
    watch : {
      $attrs : function(newValue,oldValue){
        this.progress = newValue.progress;
      }
    },
    created(){
        this.progress = this.$attrs.progress;
    }
}
</script>
<style>

.ts-progress {
  height: 5px;
  border-radius: 5px;
  width: 100px;
  background-color: #f4f4f4;
  position: absolute;
  top: 50%;
  margin-top: -3px;
  left: 50px;
}
.ts-progress span.ts-progress-mask {
  display: block;
  width: 50px;
  height: 5px;
  background-color: #007aff;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  margin-top: -3px;
  left: 0;
}

.ts-progress .ts-progress-status {
  display: block;
  font-size: 14px;
  position: absolute;
  top: -250%;
  left: 50%;
  margin-left: -14px;
  color: black;
}
</style>